<template>
  <CZDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerCZModal"
  />
  <PPDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerPPModal"
  />
  <SSDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerSSModal"
  />
  <DDDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerDDModal"
  />
  <DPDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerDPModal"
  />
  <CPDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerCPModal"
  />
  <WZDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerWZModal"
  />
  <RRDetailsModal
    :centered="true"
    :canFullscreen="false"
    v-bind="{ ...stationData }"
    @register="registerRRModal"
  />
  <CanalDetailsModal :centered="true" @register="registerCanalModal" />
</template>

<script lang="ts" setup>
import { watch, onMounted } from "vue";
import CZDetailsModal from "./CZ";
import PPDetailsModal from "./PP";
import SSDetailsModal from "./SS";
import DDDetailsModal from "./DD";
import DPDetailsModal from "./DP";
import CPDetailsModal from "./CP";
import WZDetailsModal from "./WZ";
import RRDetailsModal from "./RR";
import CanalDetailsModal from "./Canal";
import { useModal } from "@gui-pkg/antdcomponents";

defineOptions({ name: "StationPopup" });

const [registerCZModal, { openModal: openCZModal }] = useModal();
const [registerPPModal, { openModal: openPPModal }] = useModal();
const [registerSSModal, { openModal: openSSModal }] = useModal();
const [registerDDModal, { openModal: openDDModal }] = useModal();
const [registerDPModal, { openModal: openDPModal }] = useModal();
const [registerCPModal, { openModal: openCPModal }] = useModal();
const [registerWZModal, { openModal: openWZModal }] = useModal();
const [registerRRModal, { openModal: openRRModal }] = useModal();
const [registerCanalModal, { openModal: openCanalModal }] = useModal();

const props = defineProps({
  stationData: { type: Object },
});

watch(
  () => props.stationData,
  (val) => {
    console.log(val, "val");
    initOpenModal(val);
  },
  { deep: true }
);

onMounted(() => {
  // initOpenModal(props.stationData);
});

const initOpenModal = (val) => {
  if (val?.sttp === "CZ") {
    openCZModal(true, { record: val });
  }
  if (val?.sttp === "PP") {
    openPPModal(true, { record: val });
  }
  if (val?.sttp === "SS") {
    openSSModal(true, { record: val });
  }
  if (val?.sttp === "DD" || val?.sttp === "HZ") {
    openDDModal(true, { record: val });
  }
  if (val?.sttp === "DP") {
    openDPModal(true, { record: val });
  }
  if (val?.sttp === "CP") {
    openCPModal(true, { record: val });
  }
  if (val?.sttp === "WZ") {
    openWZModal(true, { record: val });
  }
  if (val?.sttp === "RR") {
    openRRModal(true, { record: val });
  }
  if (val?.sttp === "canal") {
    openCanalModal(true, { record: val });
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped></style>

<style lang="less" rel="stylesheet/less">
@import "./style/dark.less";
</style>
